<template>
  <div class="quick-start">
    <div class="header">
      <h3>快捷入口</h3>
      <a-icon
        :type="isDeleteMode ? 'close-circle' : 'delete'"
        @click="toggleDeleteMode"
        class="toggle-icon"
      />
    </div>
    <div class="cards-container">
      <div
        v-for="(item, index) in shortcuts"
        :key="index"
        @click="navTo(item)"
        :class="[
          'w-32 h-24 border rounded-lg flex justify-center items-center relative cursor-pointer  transition',
          item.backgroundColor,
          item.backgroundHoverColor,
        ]"
        :style="{
          backgroundImage: `url(${item.img})`,
          backgroundPosition: 'right bottom',
          backgroundRepeat: 'no-repeat',
          backgroundSize: '80px',
        }"
      >
        <span class="absolute left-4 top-4 text-white">{{
          `${item.name}`
        }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { v4 as uuidv4 } from "uuid";
import { useRouter } from "vue-router";
import Img1 from "@/assets/quick/1.png";
import Img2 from "@/assets/quick/2.png";
import Img3 from "@/assets/quick/3.png";
import Img4 from "@/assets/quick/4.png";
import Img5 from "@/assets/quick/5.png";
export default {
  name: "QuickStart",
  props: {
    isDeleteMode: {
      type: Boolean,
      default: false,
    },
    Imgs: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const router = useRouter();
    const shortcuts = ref([
      {
        id: uuidv4(),
        name: "随机点名",
        backgroundColor: "bg-blue-600",
        backgroundHoverColor: "hover:bg-blue-500",
        link: "/roll-call",
        img: Img5,
        modal: "random",
      },
      {
        id: uuidv4(),
        name: "学号点名",
        backgroundColor: "bg-purple-600",
        backgroundHoverColor: "hover:bg-purple-500",
        link: "/roll-call",
        img: Img3,
        modal: "numberRollCall",
      },

      {
        id: uuidv4(),
        name: "多选点名",
        backgroundColor: "bg-amber-600",
        backgroundHoverColor: "hover:bg-amber-500",
        link: "/roll-call",
        img: Img4,
        modal: "multiSelect",
      },
      {
        id: uuidv4(),
        name: "班级管理",
        backgroundColor: "bg-green-600",
        backgroundHoverColor: "hover:bg-green-500",
        link: "/manageclass",
        img: Img2,
      },
    ]);

    const isDeleteMode = ref(false);
    const toggleDeleteMode = () => {
      isDeleteMode.value = !isDeleteMode.value;
    };

    const removeShortcut = (index) => {
      shortcuts.value.splice(index, 1);
    };

    const handleCardClick = (card) => {
      router.push(card.link);
    };
    const navTo = (item) => {
      if (item.modal) {
        
        router.push({ path: item.link, query: { modal: item.modal } });
      } else {
        router.push(item.link);
      }
    };

    return {
      shortcuts,
      isDeleteMode,
      toggleDeleteMode,
      removeShortcut,
      handleCardClick,
      navTo,
    };
  },
};
</script>
<style scoped lang="less">
.quick-start {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .toggle-icon {
      font-size: 20px;
      cursor: pointer;
      color: rgba(0, 185, 155, 1);
      transition: color 0.3s;

      &:hover {
        color: #ff4d4f;
      }
    }
  }

  .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .shortcut-card {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .card-icon {
        font-size: 36px;
        color: #fff;
        margin-bottom: 8px;
      }

      .card-title {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }

      .remove-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 20px;
        color: #ff4d4f;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #d9363e;
        }
      }
    }
  }
}
</style>
